<template>
  <!--导航栏-->
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#84B9EE"
      text-color="#fff"
      active-text-color="#909399">
      <el-menu-item index="1"><i class="el-icon-s-unfold" style="color: #fff"></i>首页</el-menu-item>
      <el-menu-item index="2"><i class="el-icon-edit" style="color: #fff"></i>我的知识库</el-menu-item>
      <!--<el-submenu index="2">-->
        <!--<template slot="title"><i class="el-icon-monitor"></i> 我的笔记</template>-->
        <!--<el-menu-item index="2-1">选项1</el-menu-item>-->
        <!--<el-menu-item index="2-2">选项2</el-menu-item>-->
        <!--<el-menu-item index="2-3">选项3</el-menu-item>-->
        <!--<el-submenu index="2-4">-->
          <!--<template slot="title">选项4</template>-->
          <!--<el-menu-item index="2-4-1">选项1</el-menu-item>-->
          <!--<el-menu-item index="2-4-2">选项2</el-menu-item>-->
          <!--<el-menu-item index="2-4-3">选项3</el-menu-item>-->
        <!--</el-submenu>-->
      <!--</el-submenu>-->
      <el-menu-item index="3">
        <div>
          <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="普通文档" value="1"></el-option>
              <el-option label="数据表格" value="2"></el-option>
              <el-option label="思维导图" value="3"></el-option>
              <el-option label="MarkDown" value="4"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-menu-item>
      <el-menu-item index="4">
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-plus" style="color: #fff"></i>
            新建
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>普通文档</el-dropdown-item>
            <el-dropdown-item>数据表格</el-dropdown-item>
            <el-dropdown-item>思维导图</el-dropdown-item>
            <el-dropdown-item>MarkDown</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>
      <el-menu-item index="5">
        <el-badge :value="1" class="item" type="primary">
          <el-button size="small"><i class="el-icon-bell"></i> 消息中心</el-button>
        </el-badge>
      </el-menu-item>
      <el-menu-item index="6">
        <el-dropdown>
          <span class="el-dropdown-link">
            <div class="demo-type">
            <el-avatar :size="40" src="https://empty" @error="errorHandler">
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
            </el-avatar>
          </div>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <i class="el-icon-user"></i>
              个人主页
            </el-dropdown-item>
            <el-dropdown-item>
              <i class="el-icon-setting"></i>
              账户设置
            </el-dropdown-item>
            <el-dropdown-item>
              <i class="el-icon-house"></i>
              账号安全
            </el-dropdown-item>
            <el-dropdown-item>
              <i class="el-icon-switch-button"></i>
              退出
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>
    </el-menu>

</template>

<style>
  .el-select .el-input {
    width: 90px;
  }
  .el-input{
    width: 500px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #fff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-dropdown-menu{
    width: 120px;
    text-align: left;
  }
</style>

<script>
  export default {
    name: 'Menu',
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        input3: '',
        select: ''
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    },

  }
</script>

